<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>修改用户</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../css/oksub.css">
	<link rel="stylesheet" href="../../libme/modules/formselects/formSelects-v4.css">
	<link rel="stylesheet" href="../../libme/modules/dtree/dtree.css">
	<link rel="stylesheet" href="../../libme/modules/dtree/font/dtreefont.css">
	<script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
	<style type="text/css">
		/* 修改验证表单异常时提示颜色 */
		/*.layui-layer-tips .layui-layer-content {*/
			/*background-color: rgb(80, 80, 80) !important;*/
			/*color: #30ff00 !important;*/
		/*}*/
		/*.layui-layer-tips i.layui-layer-TipsB, .layui-layer-tips i.layui-layer-TipsT {*/
			/*border-right-color: rgb(80, 80, 80)!important;*/
		/*}*/
	</style>
</head>
<body>
<div class="ok-body">
	<!--form表单-->
	<!--<form class="layui-form layui-form-pane ok-form">-->
	<form class="layui-form ok-form" lay-filter="sysuser-edit">
		<input type="hidden" name="userId" id="userId" value="">
		<div class="layui-form-item">
			<label class="layui-form-label">登录账户</label>
			<div class="layui-input-block">
				<input type="text" placeholder="用户账号" autocomplete="off" class="layui-input" lay-verify="required" lay-verType="tips" id="username" disabled>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">用户昵称</label>
			<div class="layui-input-block">
				<input type="text" name="nickname" placeholder="用户昵称" autocomplete="off" class="layui-input" lay-verify="required" lay-verType="tips" id="nickname">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">电子邮箱</label>
			<div class="layui-input-block">
				<input type="text" name="email" placeholder="电子邮箱地址" autocomplete="off" class="layui-input" lay-verify="email" lay-verType="tips" id="email">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">手机号码</label>
			<div class="layui-input-block">
				<input type="text" name="mobile" placeholder="联系方式" autocomplete="off" class="layui-input" lay-verify="mobile" lay-verType="tips" id="mobile">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">账户类型</label>
			<div class="layui-input-block">
				<input type="radio" name="userType" value="00" title="系统用户" lay-filter="userType" checked>
				<input type="radio" name="userType" value="10" title="内部用户" lay-filter="userType">
				<input type="radio" name="userType" value="20" title="注册用户" lay-filter="userType">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">工作岗位</label>
			<div class="layui-input-block">
				<select name="postId" lay-verify="required" id="postId"></select>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">所属部门</label>
			<div class="layui-input-inline">
				<input type="text" name="deptName" placeholder="所属部门" autocomplete="off" class="layui-input"
					   lay-verify="required" lay-verType="tips" id="deptName">
				<input type="hidden" name="deptId" id="deptId" value=""/>
			</div>
			<button type="button" class="layui-btn layui-btn-normal" id="deptBtn">选择部门</button>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">备注</label>
			<div class="layui-input-block">
				<input type="text" name="remark" placeholder="用户什么也没有留下" autocomplete="off" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="edit">修&nbsp;&nbsp;改</button>
				<!--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
			</div>
		</div>
	</form>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script src="../../libme/pages/body.js"></script>
<script type="text/javascript">
	layui.use(["element", "form", "jquery","layer","okMock","api","dtree"], function () {
		let form = layui.form;
        let $ = layui.jquery;
        let okMock = layui.okMock;
        let layer = layui.layer;
        let dtree = layui.dtree;
        let api = layui.api;
		okLoading.close();

		// tree.render({
        // 	elem: "#permissionTree",
        // 	//data: okMock.api.permission.list,
        // 	data: data,//从本地 localStorage 中取值
        // 	showCheckbox: true
        // });

        form.verify({
            email: function (value, item) {
				return api.regEmail(value);
            },
			mobile: function (value, item) {
				return api.regMobile(value);
            }
        })

        form.on("submit(edit)", function (data) {
			// TODO 权限节点校验
			api.request({
				url:okMock.api.user.update,
				where: data.field,
				dataType: api.jsonType.ujson
			},function (resp, stat) {
                api.greenTickMsg("修改成功", function () {
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                });
            },null,function (resp) {
				if(resp.code == api.responseCode.user.permissionFailure) {
                    api.redCrossMsg("have no permission")
                }
            })
			return false;
		});

        function showDeptDtree() {
            layer.open({
                type: 1,  //type:0 也行
                title: "选择部门",
                area: ["400px", "80%"],
                content: '<ul id="depts" class="dtree" data-id="0"></ul>',
                btn: ['确认'],
                success: function(layero, index){
                    var DTree = dtree.render({
                        //  obj: $(layero).find("#openTree1"),    如果直接用elem加载不出来，则可以使用这个方式加载jquery的DOM
                        elem: "#depts",
                        url: okMock.api.dept.dtree,
                        dataStyle: "layuiStyle",    //使用layui风格的数据格式（使用"defaultStyle"出现无法加载数据情况）
                        dataFormat: "list",         //配置data的风格为list
                        response:{//返回JSON字段与DTree字段不一致时需要使用
                            statusCode: 100, //返回码
                        },//修改response中返回数据的定义
                        done: function(res, $ul, first){
                            if(first) {
                                dtree.dataInit("depts", $('#deptId').val());
                            }
                        }
                    });

                    // 绑定节点的双击
                    dtree.on("nodedblclick('depts')", function(obj){
                        $("#deptId").val(obj.param.nodeId);
                        $("#deptName").val(obj.param.context);

                        layer.close(index);
                    });
                },
                yes: function(index, layero) {
                    var param = dtree.getNowParam("depts"); // 获取当前选中节点
                    $("#deptId").val(param.nodeId);
                    $("#deptName").val(param.context);
                    layer.close(index);
                }
            });
        }
        $('#deptBtn,#deptName').click(function () {
            showDeptDtree();
        });

        $(function () {//页面加载
        })
	})
    function iframeRenderForm() {//由父页面调用
        layui.use(['form'], function () {
            var form = layui.form;
            form.render('select','sysuser-edit');
        })
    }
</script>
</body>
</html>
